<template>
    <f7-page>
        <f7-navbar title="选择司机" back-link="返回">
              <f7-subnavbar>
                <f7-segmented raised>
                    <f7-button :class="{'active':tabActive==='frend'}"   @click="changeTab('frend')">挂靠车辆</f7-button>
                    <f7-button :class="{'active':tabActive==='platform'}" @click="changeTab('platform')">平台推荐</f7-button>
                </f7-segmented>
            </f7-subnavbar>
        </f7-navbar>

        <f7-row no-gutter class="row_nav">
                <f7-col width="80">
                    <f7-icon f7="search_strong" class="search_img"></f7-icon>
                    <input type="text" placeholder="搜索联系人" class="Please_enter">
                </f7-col>
                <f7-col width="20">
                    <f7-button class="search">搜索</f7-button>
                </f7-col>
        </f7-row>
        <div class="driver_list" v-show="tabActive==='frend'">
            <div class="item-inner" >
                <li v-for="item,index in this.driverGroup">
                    <div @click="groupClick(item,index)">
                        <f7-icon :f7="item.switch?'down':'right'" class="add"></f7-icon>
                        <h2 class="new_txt">{{item.name}}<span>({{item.count}})</span></h2>
                    </div>
                    <div class="item-inner"  v-for="grupDtl,key in driverGroupItem" v-show="item.switch && key==item._id">
                        <template v-for="dt in grupDtl">
                            <div class="list-company-checkbox">
                                <div class="company-checkbox">
                                    <label  class="checkbox pull-left" @change="boxChange()"><input type="checkbox" v-model="dt.switch"><i class="icon-checkbox"></i></label>
                                    <div class="item item-avatar item-car">
                                        <img :src="dt.truck_logo?dt.truck_logo:0" class="img-car" @error="imgError" data-type="truck_logo">
                                        <h3 class="text-purple ng-binding">
                                            {{dt.truck_num}}
                                            <img src="../../assets/img/pass-icon2.png" class="pass-icon">
                                            <span class="replace ng-binding">{{dt.newLogin?'上线':'未上线'}}</span>
                                        </h3>
                                        <h5 class="text-gray1 ng-binding" >载重{{dt.truck_weight}}吨</h5>
                                        <div class="item-face text-center gap-10">
                                            <img class="img-circle" :src="dt.photo_url">
                                            <h6 class="text-gray ng-binding">{{dt.real_name}}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </li>
            </div>
        </div>
        <div class="driver_list" v-show="tabActive==='platform'">
            <div class="item-inner"  v-for="dt,key in driverPlatformItem" >
                <li>
                <div class="item-inner">
                <div class="list-company-checkbox" >
                    <div class="list-company-checkbox">
                        <div class="companygetVerifyDriver-checkbox">
                            <label  class="checkbox pull-left" @change="boxChange()"><input type="checkbox" v-model="dt.switch"><i class="icon-checkbox"></i></label>
                            <div class="item item-avatar item-car">
                                <img :src="dt.truck_logo?dt.truck_logo:0" class="img-car" @error="imgError" data-type="truck_logo">
                                <h3 class="text-purple ng-binding">
                                    {{dt.truck_num}}
                                    <span class="replace ng-binding">{{dt.newLogin?'上线':'未上线'}}</span>
                                </h3>
                                <h5 class="text-gray1 ng-binding" >载重{{dt.truck_weight}}吨</h5>
                                <div class="item-face text-center gap-10">
                                    <img class="img-circle" :src="dt.photo_url">
                                    <h6 class="text-gray ng-binding">{{dt.real_name}}</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                </li>
            </div>
        </div>





     <f7-toolbar>
        <div class="row button-foot">
            <div class="col col-75">
                已选择：
               <span class="text-purple">{{frendIds.length}}辆挂靠车</span>,
               <span class="text-purple">{{platformIds.length}}辆平台车</span>
            </div>
            <div class="col col-25 text-align-center" @click="creatDraverDmd()">立即通知</div>
        </div>
    </f7-toolbar>
    </f7-page>
</template>

<script>
    import utilsCommon from '../../utils/common'
    export default {
        name: "selectDriver",
        data(){return{
            otherInfor:{},
            tabActive:'frend',
            driverGroup:null,
            driverGroupItem:{},
            driverPlatformItem:[],
            frendIds:[],
            platformIds:[]

        }},
        methods:{
            changeTab(type){
                this.tabActive=type;
            },
            async getGroup(){
                this.otherInfor.addsInfo.verify=true
                this.driverGroup = (await this.mineService.getListGroup({type: "DRIVER"})).data.data;

                this.otherInfor.addsInfo.verify=true;
                let drivers = (await this.LineService.getDriver(this.otherInfor.addsInfo)).data.data;
                this.driverGroup.unshift({
                    count:drivers.length,
                    name:"未分组司机",
                    _id:"weifenzusiji"
                })
                utilsCommon.addAttrSwitch(this.driverGroup)

            },
            async getPlatformDriver(){
                this.otherInfor.addsInfo.verify=false
                this.driverPlatformItem = (await this.LineService.getDriver(this.otherInfor.addsInfo)).data.data;
                utilsCommon.addAttrSwitch(this.driverPlatformItem)

            },
            //组点击事件
            groupClick(item,index){
                item.switch=!item.switch
                this.$set(this.driverGroup,index,item)


                //数据懒加载
                if(item.switch){
                    let temp=true;
                    for(let k in this.driverGroupItem){
                        if(k==item._id){
                            temp=false
                        }
                    }
                    if(temp){
                        this.getGroupDtl(item._id)
                    }
                }

            },
            async getGroupDtl(groupid){
                let drivers;
                if(groupid=='weifenzusiji'){
                    this.otherInfor.addsInfo.verify=true
                    this.otherInfor.addsInfo.group_id='';
                    drivers = (await this.LineService.getDriver(this.otherInfor.addsInfo)).data.data;
                }else{
                    this.otherInfor.addsInfo.verify=true;
                    this.otherInfor.addsInfo.group_id=groupid;
                    drivers = (await this.LineService.getDriver(this.otherInfor.addsInfo)).data.data;

                }
                utilsCommon.addAttrSwitch(drivers)
                this.$set(this.driverGroupItem,groupid,drivers)
            },
            boxChange(){
                this.frendIds=[]
                this.platformIds=[]
                for(let k in this.driverGroupItem){
                    this.driverGroupItem[k].forEach( (item)=> {
                        if(item.switch){
                            this.frendIds.push(item._id)
                        }

                    })
                }
                this.driverPlatformItem.forEach( (item)=> {
                    if(item.switch){
                        this.platformIds.push(item._id)
                    }

                })

            },
            async creatDraverDmd(){
                this.otherInfor.formData.platform_driver=this.platformIds;
                this.otherInfor.formData.user_ids=this.frendIds;
                if(this.otherInfor.formData.scene=='both'){
                    let addSendRes=await this.LineService.addBoth(this.otherInfor.formData);
                    if(addSendRes.data.status=='success'){
                        this.toast('发布司机抢单成功')
                        this.$f7.router.navigate({url: '/mine/'})
                    }else{
                        this.toast(addSendRes.data.msg)
                    }

                    return false;
                }

                let addSendRes=await this.LineService.addSend(this.otherInfor.formData);
                if(addSendRes.data.status=='success'){
                    this.toast('发布司机抢单成功')
                   this.$f7.router.navigate({url: '/trade/'})
                }else{
                   this.toast(addSendRes.data.msg)
                }

            }

        },
        created(){
            this.otherInfor=this.Storage.get('assignDriver')
            this.otherInfor.addsInfo.page=1;
            this.getGroup()
            this.getPlatformDriver();
        }
    }
</script>

<style scoped>
.button-foot{
  width: 100%;
  font-size: 14px;
}
.button-foot .col-75{
    padding-left: 15px;
     width: 70% !important;
     line-height: 44px;
}
.ios .row .col-25 {
    width: 30% !important;
}
.button-foot .col:last-child {
    text-align: center;
     background: #9898e7;
    color: #fff;
    line-height: 44px;
}


li{list-style-type:none;}
.ios .page {
  background: #fff;
}
.ios a {
  color: #333;
  display: inline-block;
  width: 100%;
}
.ios .button {
  border: none;
  border-left-width: 0 !important;
  font-size: 14px;
  font-weight: normal;
}
.active {
  color: #000 !important;
  font-weight: bold !important;
}
.ios .subnavbar {
  margin-bottom: 30px;
  border-color: #f5f5f5;
}
.ios .color-theme-white .button {
  color: #777;
}
.row_nav {
  position: relative;
  background: #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  padding: 10px;
  height: 35px;
}

.ios .row .col-80 {
  background: #fff;
  border-radius: 4px;
  height: 34px;
}

.search {
  background: #fff;
  color: #999 !important;
  border-color: #fff !important;
  font-size: 12px;
  height: 34px !important;
  line-height: 34px !important;
}

.search_img {
  position: absolute;
  font-size: 16px;
  color: #999;
  top: 19px;
  left: 20px;
}

.Please_enter {
  margin-left: 30px;
  width: 80%;
  height: 34px;
}
  .new_txt {
    margin: 0px;
    font-weight: inherit;
    display: inline-block;
    font-size: 16px;
    margin-left: 10px;
    color: #000;
  }

  .new_txt span {
    margin-left: 5px;
  }
  .add {
    font-size: 22px;
  }
 .item-inner {
     padding: 10px 10px 10px 15px;
  }
  /* 名片 */
.list-inset {
    background: transparent;
    margin: 0 15px;
}
    .text-left {
        position: relative;
    }

    .line-icon {
        position: absolute;
        left: -2px;
        width: 16px;
        height: 45px;
        top:0px;
    }
    .The_of{
        text-align: center;
    }
    .pulll-left {
        text-align: left;
        margin-left: 20px;
    }

    .pull-right {
        text-align: right;
    }

    .pulll-left span {
        font-size: 12px;
        color: #666;
        display: block;
    }

    .pulll-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        font-size: 12px;
        color: #666;
        display: block;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .text-center_article {
        font-size: 14px;
        color: #333;
        margin-top: -5px;
    }

    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #666;
    }
.row_ll{
  padding:5px;
  }
.gap-row {
    padding: 10px 0;
}
.Future_generations{
     float: left;
}
.pulll-left {
    float: left;
}
.generations {
    font-size: 16px;
    color: #333;
   margin-left:28px;
}
.company-checkbox {
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 1px;
}
.company-checkbox .checkbox {
    top:24px;
    position: absolute;
    left: 0px;
    z-index: 3;
}
.item-car {
    border: none;
    min-height: 64px;
    font-size: 14px;
    color: #444;
    position: relative;
    z-index: 2;
    margin: -1px;
    padding: 16px;
     padding-left: 65px;
}
.item-car.item-avatar .img-car {
    left: 20px;
    border-radius: 3px;
    width: 38px;
    height: 28px;
    top: 25px;
    position: absolute;
}
.item h3 {
    margin: 0 0 4px 0;
    font-size: 14px;
}
.text-purple {
    color: #A2A2F0;
}
.pass-icon {
    width: 30px;
    height: 17px;
    vertical-align: text-bottom;
    margin: 0px 4px;
}
.replace {
    font-size: 10px;
    color: #8d8d8d;
    text-align: center;
    display: inline-block;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 0 4px;
}
.text-gray1 {
    color: #666;
}
.text-gray{
    color: #999;
}
.item h5, .item h6 {
    margin: 0 0 3px 0;
    font-size: 10px;
}
.item-face {
    position: absolute;
    right: 15px;
    top: 8px;
}
.img-circle {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    background: #f0f0f0;
}
.list-company-checkbox{
    margin-left: 10px;
}

</style>
